<template>
  <view class="forecast-card">
    <view class="forecast-title">未来天气</view>
    <view class="forecast-list">
      <view
        class="forecast-item"
        v-for="(item, index) in forecastList"
        :key="index"
      >
        <view class="date">{{ formatDate(item.date) }}</view>
        <view class="weather">
          <text>{{ item.dayWeather }}</text>
          <text v-if="item.dayWeather !== item.nightWeather">
            转{{ item.nightWeather }}
          </text>
        </view>
        <view class="temperature">
          <text class="high">{{ item.high }}°</text>
          <text class="divider">/</text>
          <text class="low">{{ item.low }}°</text>
        </view>
        <view class="details">
          <text>{{ item.windDirection }}风 {{ item.windSpeed }}级</text>
          <text>湿度 {{ item.humidity }}%</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { getWeatherForecast } from '@/api/weather'

export default {
  name: 'WeatherForecast',
  props: {
    location: {
      type: String,
      required: true
    }
  },

  setup(props) {
    const forecastList = ref([])

    const formatDate = (dateStr) => {
      const date = new Date(dateStr)
      const today = new Date()
      const tomorrow = new Date(today)
      tomorrow.setDate(tomorrow.getDate() + 1)

      if (date.toDateString() === today.toDateString()) {
        return '今天'
      } else if (date.toDateString() === tomorrow.toDateString()) {
        return '明天'
      } else {
        return '后天'
      }
    }

    const updateForecast = async () => {
      try {
        const data = await getWeatherForecast(props.location)
        forecastList.value = data
      } catch (error) {
        console.error('获取天气预报失败:', error)
      }
    }

    watch(() => props.location, (newLocation) => {
      if (newLocation) {
        updateForecast()
      }
    })

    onMounted(() => {
      updateForecast()
    })

    return {
      forecastList,
      formatDate
    }
  }
}
</script>

<style lang="scss">
.forecast-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 14px 16px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  .forecast-title {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 12px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }

  .forecast-list {
    display: flex;
    justify-content: space-between;
    gap: 8px;

    .forecast-item {
      flex: 1;
      text-align: center;
      padding: 0 6px;
      transition: all 0.3s ease;

      &:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.15);
      }

      .date {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.95);
        margin-bottom: 8px;
        font-weight: 600;
      }

      .weather {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 8px;
        font-weight: 400;
        line-height: 1.4;

        text {
          &:not(:first-child) {
            font-size: 11px;
            opacity: 0.75;
            margin-left: 3px;
          }
        }
      }

      .temperature {
        font-size: 17px;
        color: #fff;
        margin-bottom: 8px;
        font-weight: 600;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

        .high {
          color: #ff6b6b;
        }

        .divider {
          margin: 0 5px;
          opacity: 0.4;
          font-weight: 400;
        }

        .low {
          color: #4ecdc4;
        }
      }

      .details {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.5;
        font-weight: 400;

        text {
          display: block;
          margin-bottom: 4px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>